<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="../../font/iconfont.css">
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    i {
      font-style: normal;
    }

    a {
      text-decoration: none;
    }

    #fixed_box_top {
      position: fixed;
      top: calc(100% - 68%);
      left: calc(100% - 4%);
    }

    #fixed_box_top>a {
      display: block;
      width: 57px;
      height: 66px;
      background: url(../../image/a.png);
      background-position: 868px 0px;
      border-radius: 100%;
    }



    .fixed_box>ul {
      position: fixed;
      top: 300px;
      left: calc(100% - 3%);
    }

    .fixed_box>ul>li {
      list-style: none;
      width: 44px;
      height: 44px;
      text-align: center;
      position: relative;
    }

    .fixed_box>ul>li>div {
      font-size: 12px;
      line-height: 44px
    }

    .fixed_box>ul>li>a>p {
      font-size: 24px;
      line-height: 44px;
      color: gray;
      margin-left: 8px;
    }

    .fixed_box>ul>li>div>a>img {
      margin-top: 5px;
    }

    .fixed_box>ul>li>span {
      text-align: center;
      line-height: 44px;
    }

    .fixed_box>ul>li>div>a>p {
      line-height: 1;
      margin-left: 5px;
      color: gray;
    }

    .fixed_box>ul>li>div {
      position: absolute;
      top: 0px;
      left: -77px;
      width: 77px;
      height: 44px;
      text-align: center;
      background: #f4f4f4;
      display: none;
    }



    .fixed_box>ul>li:hover {
      background: #f4f4f4;
    }

    .fixed_box>ul>li:hover div {
      display: block;
    }

    /*  */
    .fixed_b_t_hidden {
      /* width: 300px; */
      width: 500px;
      height: 180px;
      /* background: red; */
      text-align: center;
      position: absolute;
      top: 1px;
      /* right: 60px; */
      right: 40 px;
      display: none;
    }



    .fixed_b_t_hidden>em {
      font-style: normal;
      display: block;
      float: right;
      margin-bottom: 30px;
      transition: all .5s;
    }

    .fixed_b_t_hidden>em:hover {
      transform: rotate(+180deg);
    }

    .fixed_b_t_hidden>h3 {
      color: #ccaa7a;
      font-size: 20px;
      clear: both;
    }

    .fixed_b_t_hidden>i {
      display: inline-block;
      color: #666;
      font-size: 12px;
      margin-bottom: 30px;
    }

    .fixed_b_t_hidden>div {
      width: 100%;
      height: 44px;
      display: flex;
      justify-content: space-around;
      border-top: 1px solid #ebebeb;
    }

    .fixed_b_t_hidden>div>a {
      font-size: 12px;
      line-height: 45px;
    }

    .fixed_b_t_hidden>div :nth-child(1) {
      color: #cc3d3d;
    }

    .fixed_b_t_hidden>div :nth-child(2) {
      color: #666;
    }
  </style>
</head>

<body style="height: 8000px">
  <div class="fixed_box">
    <div id="fixed_box_top">
      <a class="fixed_box_top_a" href="#">

      </a>

      <div class="fixed_b_t_hidden">
        <em class="iconfont icon-guanbi"></em>
        <h3>奢华名表夏日钜惠</h3>
        <i>12期免息分期咨询享额外优惠</i>
        <div>
          <a href="#">选表咨询</a>
          <a href="#">手表维修</a>
        </div>
      </div>


    </div>
    <ul>
      <li><span class="iconfont icon-gouwuchekong"></span>
        <div>购物车</div>
      </li>
      <li><span class="iconfont icon-shoucangaixinxin"></span>
        <div>我的收藏</div>
      </li>
      <li><span class="iconfont icon-shizhong"></span>
        <div>浏览足迹</div>
      </li>
      <li><span class="iconfont icon-ico"></span>
        <div style="height: 220px; width: 220px; top: -132px;left: -220px;">
          <a href="#">
            <img src="../../image/qrcode_02.png" alt="">
            <p>下载万表App</p>
          </a>
        </div>
      </li>
      <li><span class="iconfont icon-huidaodingbuxianxing"></span>
        <div>回到顶部</div>
      </li>
    </ul>
  </div>
</body>
<script>
  let icon = document.querySelector(".icon-huidaodingbuxianxing");
  let backTop = icon.parentNode
  backTop.onclick = function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  }
  $(".fixed_box_top_a").mouseenter(() => {
    $(".fixed_b_t_hidden").css("display", "block")
  })
  $(".fixed_box_top_a").mouseleave(() => {
    /* setTimeout(() => {
      $(".fixed_b_t_hidden").css("display", "none")
    }, 2000) */
    $(".fixed_b_t_hidden").css("display", "none")
  })
</script>

</html>